<script lang='ts'>
import { defineComponent, PropType } from "vue";

interface AtlasDataType {
  id: number;
  title: string;
  src: string;
  fileUrl: string;
}

const props = {
  data: {
    type: Object as PropType<AtlasDataType>,
    default: {
      id: undefined,
      title: "巴音郭楞蒙古自治州",
      src: "",
      fileUrl: "",
    },
  },
};

export default defineComponent({
  name: "AtlasCard",
  components: {},
  props,
  emits: ["select"],
  setup(props, { emit }) {
    //事件
    const down = (id: number, fileUrl: string) => {
      console.log("下载事件");
      emit("select", {
        type: "down",
        id,
        fileUrl,
      });
    };
    const preview = (id: number, fileUrl: string) => {
      console.log("预览事件");
      emit("select", {
        type: "preview",
        id,
        fileUrl,
      });
    };
    const detail = (id: number) => {
      console.log("详情查看");
      emit("select", {
        type: "detail",
        id,
      });
    };

    return {
      down,
      preview,
      detail,
    };
  },
});
</script>

<template>
  <div class="atlas-card-wrap">
    <div class="atlas-card-body">
      <el-image
        style="
          width: 200px;
          min-height: 140px;
          display: flex;
          align-items: center;
        "
        :src="data.src"
      ></el-image>
    </div>
    <el-row>
      <el-col :span="12" class="atlas-card-title">
        {{ data.title ? data.title : "巴音郭楞蒙古自治州" }}</el-col
      >
      <el-col :span="4" class="atlas-color" @click="down(data.id, data.fileUrl)"
        >下载</el-col
      >
      <el-col
        :span="4"
        class="atlas-color"
        @click="preview(data.id, data.fileUrl)"
        >预览</el-col
      >
      <el-col :span="4" class="atlas-color" @click="detail(data.id)"
        >详细信息</el-col
      >
    </el-row>
  </div>
</template>

<style lang='less' scoped>
.atlas-card-wrap {
  width: 100%;
  max-width: 350px;
  background: rgb(248, 251, 255);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  margin: 10px 19px;

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .atlas-card-body {
    display: flex;
    justify-content: center;
  }

  .atlas-card-title {
    padding-left: 4px;
    line-height: 2em;
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .atlas-color {
    font-size: 0.8em;
    line-height: 2em;
    color: rgb(78, 165, 255);
    text-align: center;
    cursor: pointer;
    &:hover {
      color: blue;
    }
  }
}
</style>